<template>
  <el-dialog
      :title=title
      :show-close="false"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      v-dialog-drag
      width="20%">
    <div slot="title">
      <span>{{title}}</span>
    </div>
    <div style="text-align: center">
      <svg-icon :icon-class="icon" />
      <div style="margin-top: 5px">
        <span style="letter-spacing: 2px">{{message}}</span>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleCancelClick">取 消</el-button>
      <el-button size="mini" class="myBtn" type="primary" @click="handleOkClick">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "MyDialog",
  props: {
    title: {
      type: String
    },
    message: {
      type: String
    },
    icon: {
      type: String,
      default: "info"
    },
    handleCancel: {
      type: Function
    },
    handleOk: {
      type: Function
    }
  },
  data() {
    return {
      dialogVisible: true,
    }
  },

  methods: {
    handleCancelClick() {
      this.dialogVisible = false;
      this.handleCancel();
    },
    handleOkClick() {
      this.dialogVisible = false;
      this.handleOk();
    }
  }
}
</script>

<style scoped>
  /deep/.el-dialog__body {
    padding: 15px 20px;
  }

  /deep/ .el-dialog__header {
    padding: 8px 10px 8px;
    background-color: #1E2C3D;
    color: white;
  }



</style>